<template>
  <div class="pc" v-if="store.state.isPc">
    <div class="annual">
      <div class="banner">
        <img :src="img" alt="" />
      </div>

      <div class="annualbox" v-for="(item, index) in classlist.value">
        <div class="title" :id="item.route + index">
          <img src="../../assets/txtbox.png" alt="" />
          <span>{{ item.class_name }}</span>
        </div>
        <ul>
          <li
            v-for="item in newlist.value[index]"
            :key="item.create_time"
            @click="godetails(item)"
          >
            <div class="title">
              {{ item.school_name }}<br />
              {{ item.name }}
            </div>
            <div class="top">
              <!-- <img class="borderimg" src="../../assets/border2.png" alt="" /> -->
              <img class="avatar" src="../../assets/tachingbox.png" alt="" />
            </div>
            <div class="bottom">
              <p>{{ item.school_name }}+{{ item.name }}</p>
            </div>
          </li>
        </ul>
      </div>

      <div class="foot">
        <div class="bottom">
          <p>ICP备15112809号-2</p>
        </div>
      </div>
      <div class="artsborlist">
        <div class="artsbg" v-for="(item, index) in classlist.value">
          <div v-if="item.class_name.length <= 4">
            <a :href="'#' + item.route + index">
              {{ item.class_name.slice(0, 2) }}
              <br />
              {{ item.class_name.slice(2, 4) }}
            </a>
          </div>
          <div v-if="item.class_name.length > 4">
            <a :href="'#' + item.route + index">
              {{ item.class_name.slice(0, 3) }}

              <br />
              {{ item.class_name.slice(3, 6) }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mob" v-else>
    <div class="annual">
      <div class="banner">
        <img :src="mobimg" alt="" />
      </div>

      <div
        class="annualbox"
        style="margin-top: 80px"
        v-for="(item, index) in classlist.value"
      >
        <div class="title" :id="item.route">
          <img src="../../assets/txtbox.png" alt="" />

          <span>{{ item.class_name }}</span>
        </div>
        <ul>
          <li
            v-for="item in newlist.value[index]"
            :key="item.create_time"
            @click="godetails(item)"
          >
            <div class="top">
              <!-- <img class="borderimg" src="../../assets/border2.png" alt="" /> -->
              <img class="avatar" src="../../assets/tachingbox.png" alt="" />
            </div>
            <div class="bottom">
              {{ item.school_name }}<br />{{ item.name }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="密码验证"
    width="300px"
    center
    class="dia"
    modal-class="modal-box"
    :before-close="handleClose"
  >
    <el-input v-model="requestpwd" placeholder="请输入验证密码" />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="readpwd"> 验证 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { allNewsClass, newsLists } from "../../api/api";
import { useStore } from "vuex";
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
let store = useStore();
let $route = useRoute();
let img = ref("");
let classlist = reactive({ value: [] });
let pwd = ref("szyx168932");
let requestpwd = ref("");
let dialogVisible = ref(true);
onMounted(() => {
  getpwd();
});

const getpwd = () => {
  let cookiepwd = cookies.get("pwd");
  console.log(cookiepwd);
  if (cookiepwd != null) {
    // 有密码
    dialogVisible.value = false;
    getbanner();
  } else {
    console.log(cookiepwd);
    dialogVisible.value = true;
  }
};

const handleClose = (done: any) => {
  dialogVisible.value = false;
  getpwd();
};

const readpwd = () => {
  if (requestpwd.value == pwd.value) {
    cookies.set("pwd", "true", "4h");
    dialogVisible.value = false;
    getbanner();
  } else {
    ElMessage.error("密码错误");
    requestpwd.value = "";
  }
};

let mobimg = ref();
const getbanner = () => {
  allNewsClass().then((res) => {
    res.data.forEach((item: any, index: number) => {
      if (item.id == 24) {
        img.value = item.img;
        classlist.value = item.item;
        mobimg.value = item.app_img;
        // classlist.value = classlist.value.reverse();
        getclassall();
      }
    });
  });
};

const getclassall = () => {
  classlist.value.forEach((item: any, index: number) => {
    getnewsLists(item.id, index);
  });
};

let page = ref(1);
let limit = ref(10);
let newlist: any = reactive({ value: [] });
const getnewsLists = (id: any, index: number) => {
  if (id) {
    newsLists({
      page: page.value,
      limit: limit.value,
      class_id: id,
    }).then((res: any) => {
      res.data.reverse();
      newlist.value[index] = res.data;
    });
  }
};
// getnewsLists(20, 0);
// getnewsLists(22, 1);
function getScrollHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight
  );
}

function getScrollTop() {
  var scrollTop = 0;
  if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
  } else if (document.body) {
    scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}

// window.onscroll = function () {
//   var height = getScrollTop();
//   var rheight = getScrollHeight();
//   if (height >= rheight - 1600 && !newnull.value) {
//     loading.value == false ? getnewsLists() : "";
//   }

// };

const godetails = (value: any) => {
  window.open(`/teachingDetails?id=${value.id}`);
};

//-==========================================================================锚点跳转

const goAnchor = (selector: any) => {
  //参数selector是id选择器（#anchor14）
  document.querySelector(selector).scrollIntoView({
    behavior: "smooth",
  });
};

//-==========================================================================end锚点跳转
</script>

<style lang="scss" scoped>
.pc {
  .annual {
    :deep(.breadcrumbbox) {
      height: 80px;
      line-height: 80px;
      color: white;
      --el-text-color-regular: white !important;
      .is-link {
        height: 80px;
        line-height: 80px;
        font-size: 24px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
      }
      .el-breadcrumb__inner {
        height: 80px;
        line-height: 80px;
        font-size: 20px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
        &:hover {
          color: white;
        }
      }
      .el-breadcrumb__separator {
        height: 80px;
        line-height: 80px;
        font-size: 20px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
        &:hover {
          color: white;
        }
      }
    }
    background: url("../../assets/teachingmainbg.png");
    background-color: #f7f5f2;
    .head {
      height: 80px;
      display: flex;
      width: 100%;
      background: #002ee4;
      z-index: 999;
      box-shadow: 0 1px 3px #66666663;

      .menu {
        height: 80px;
        width: 1340px;
        margin: 0 auto;
        display: flex;

        padding: 0 15px;
        ul {
          width: 100%;
          padding: 0 80px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 1.6667vw;
          font-weight: bold;
          color: white;
        }
      }
      .navShow {
        animation: leftnav 0.5s linear;
        -webkit-animation: leftnav 0.5s linear;

        .nav-item {
          line-height: 18px !important;
          color: #999;
        }

        .active {
          background: #0006b3;
          font-weight: 700;
          color: #fff;
        }
        .leftNav-item {
          // border-bottom: 1px solid #eee;
          height: 50px;
          padding: 5px;
          box-sizing: border-box;
          font-size: 16px;
          cursor: pointer;
          line-height: 25px;
          &:first-child {
            line-height: 36px;
          }
        }
        a {
          text-decoration: none;
        }
        .leftNav {
          width: 60px;
          line-height: 16px;
          background: #fff;
          color: #777;
          position: fixed;
          left: 1%;
          top: 20%;
          text-align: center;
          box-shadow: 0 0 6px #999;
          z-index: 9;
        }
      }
    }
    .banner {
      width: 100%;
      height: calc(420px);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      margin-top: 100px;
      margin-bottom: 100px;
      display: flex;
      justify-content: center;
      position: relative;
      img {
        width: 538px;
        height: 124px;
      }
      span {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 110px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        color: #fff;
      }
    }
    ul {
      width: 1400px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      li {
        height: 380px;
        width: 436px;
        display: flex;
        background: white;
        margin-bottom: 20px;
        flex-wrap: wrap;
        border-radius: 20px;
        justify-content: space-between;
        position: relative;
        &:nth-child(3n-1) {
          margin-left: 20px;
          margin-right: 20px;
        }
        .title {
          position: absolute;
          width: 80%;
          top: 0px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 999;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          font-size: 30px;
          color: #ffffff;
          line-height: 59px;
          text-align: center;
        }
        .top {
          width: 100%;
          height: 282px;
          position: relative;
          .borderimg {
            cursor: pointer;
            position: absolute;
            left: -11px;
            top: -11px;
            width: 106%;
            height: 106%;
            z-index: 3;
          }
          .avatar {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
          }
        }
        .bottom {
          height: 60px;
          text-align: center;
          margin: 0 auto 0 auto;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          font-size: 20px;
          color: #3d3d3d;
          line-height: 27px;
        }
      }
    }
    .foot {
      width: 100%;
      height: 48px;
      background: #002ee4 url("../../assets/footarst.png") repeat;
      background-size: 60% 60%;
      .top {
        height: 220px;
        width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        padding-top: 40px;
        p {
          font-size: 18px;
          font-family: Source Han Sans-Regular, Source Han Sans;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
        }
      }
      .bottom {
        height: 48px;
        border-top: 1px solid #dadada;
        p {
          line-height: 48px;
          text-align: center;
          font-size: 18px;
          font-family: Source Han Sans-Regular, Source Han Sans;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .artsborlist {
      position: fixed;
      right: 20px;
      z-index: 999;
      top: 50%;
      transform: translateY(-50%);
      .artsbg {
        margin-top: 10px;
        display: flex;
        // background: url("../../assets/artsborbg.png");
        width: 100px;
        height: 100px;
        position: relative;
        border: 3px solid #2248e1;
        cursor: pointer;
        border-radius: 50%;
        background: white;
        a {
          display: inline-block;
          width: 100%;
          position: absolute;
          left: 50%;
          font-weight: 500;
          font-size: 24px;
          color: #2248e1;
          line-height: 33px;
          top: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
        }
      }
    }
  }
}
.mob {
  :deep(.breadcrumbbox) {
    margin-left: 2rem;
    height: 5rem;
    line-height: 5rem;
    color: white;
    --el-text-color-regular: white !important;
    .is-link {
      height: 5rem;
      line-height: 5rem;
      font-size: 1.5rem;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
    }
    .el-breadcrumb__inner {
      height: 5rem;
      line-height: 5rem;
      font-size: 1.5rem;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      &:hover {
        color: white;
      }
    }
    .el-breadcrumb__separator {
      height: 5rem;
      line-height: 5rem;
      font-size: 1.5rem;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      &:hover {
        color: white;
      }
    }
  }
  .menu {
    height: 5rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding: 0 0.9375rem;
    background: #0006b3;
    ul {
      width: 100%;
      padding: 0 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 1.6667vw;
      font-weight: bold;
      color: white;
    }
  }
  .annual {
  }
  .banner {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .title {
    margin-top: 20px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    img {
      position: relative;
      width: 300px;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      z-index: 2;
    }
    span {
      z-index: 3;
      position: absolute;
      left: 50%;
      top: 44%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: white;
      font-weight: bold;
    }
  }
  ul {
    margin: 60px auto 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 300px;
    li {
      height: 200px;
      width: 100%;
      margin-bottom: 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      .top {
        width: 100%;
        height: 200px;
        position: relative;
        .borderimg {
          z-index: 3;
          width: 100%;
          height: 100%;
        }
        .avatar {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
        }
      }
      .bottom {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        font-size: 30px;
        color: #ffffff;
        line-height: 39px;
        z-index: 99;
        text-align: center;
      }
    }
  }
  .foot {
    background: #0006b3;
    width: 46.875rem;
    height: 15.625rem;
    color: rgb(245, 245, 245);
    font-size: 1.125rem;
    padding: 0 1.5rem;
    padding-top: 2.1875rem;
    line-height: 1.875rem;
  }
  #refPlayerWrap {
    width: 100%;
    margin: 20px auto;
    height: 25rem;
  }
}
</style>
